<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font_rhi4aqzr31e/iconfont.css">
    <link rel="stylesheet" href="./css/leaderboard.css">
</head>

<body>
    <div class="app">
        <div class="classify">
            <div class="header-fixed">
                <div class="header-wrap">
                    <div class="header-wrap-l">
                        <a href="./index.html" class="iconfont header-a">&#xe660;</a>
                        <span class="header-span">排行榜</span>
                    </div>
                    <div class="header-wrap-m">
                        <a href="">男生</a>
                        <a href="" style="background-color: #e0e0e0;color: gray;">女生</a>
                    </div>
                    <div class="header-wrap-r">
                        <a href="" class="iconfont">&#xf00d9;</a>
                        <a href="" class="iconfont">&#xe611;</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tabs_ZtgWc">
            <a href="#rank1"> 月票榜</a>
            <a href="#rank2"> 畅销榜</a>
            <a href="#rank3"> 阅读榜</a>
            <a href="#rank4"> 书友榜</a>
            <a href="#rank5"> 推荐榜</a>
            <a href="#rank6"> 更新榜</a>
            <a href="#rank7"> 签约榜</a>
            <a href="#rank8"> 新书榜</a>
            <a href="#rank9"> 新人榜</a>
        </div>

        <div class="rank-empty" id="rank1" style="position: absolute;top: 0;left: 0;"></div>
        <div class="rank" >
            <div class="rankTitle">
                <i class="span-bef"></i>
                <span>月票榜</span>
                <i class="span-aft"></i>
            </div>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">1</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">2</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">3</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">4</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">5</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <div class="y_buttom">
                <span>查看更多</span>
                <i class="iconfont">&#xe65f;</i>
            </div>
        </div>
        <div class="rank-empty" id="rank2"></div>

        <div class="rank">
            <div class="rankTitle">
                <i class="span-bef"></i>
                <span>畅销榜</span>
                <i class="span-aft"></i>
            </div>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">1</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">2</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">3</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">4</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">5</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <div class="y_buttom">
                <span>查看更多</span>
                <i class="iconfont">&#xe65f;</i>
            </div>
        </div>
        <div class="rank-empty" id="rank3"></div>

        <div class="rank">
            <div class="rankTitle">
                <i class="span-bef"></i>
                <span>阅读榜</span>
                <i class="span-aft"></i>
            </div>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">1</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">2</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">3</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">4</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">5</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <div class="y_buttom">
                <span>查看更多</span>
                <i class="iconfont">&#xe65f;</i>
            </div>
        </div>
        <div class="rank-empty" id="rank4"></div>

        <div class="rank">
            <div class="rankTitle">
                <i class="span-bef"></i>
                <span>书友榜</span>
                <i class="span-aft"></i>
            </div>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">1</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">2</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">3</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">4</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">5</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <div class="y_buttom">
                <span>查看更多</span>
                <i class="iconfont">&#xe65f;</i>
            </div>
        </div>
        <div class="rank-empty" id="rank5"></div>
        <div class="rank">
            <div class="rankTitle">
                <i class="span-bef"></i>
                <span>推荐榜</span>
                <i class="span-aft"></i>
            </div>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">1</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">2</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">3</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">4</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">5</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <div class="y_buttom">
                <span>查看更多</span>
                <i class="iconfont">&#xe65f;</i>
            </div>
        </div>
        <div class="rank-empty" id="rank6"></div>
        <div class="rank">
            <div class="rankTitle">
                <i class="span-bef"></i>
                <span>更新榜</span>
                <i class="span-aft"></i>
            </div>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">1</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">2</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">3</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">4</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">5</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <div class="y_buttom">
                <span>查看更多</span>
                <i class="iconfont">&#xe65f;</i>
            </div>
        </div>
        <div class="rank-empty" id="rank7"></div>
        <div class="rank">
            <div class="rankTitle">
                <i class="span-bef"></i>
                <span>签约榜</span>
                <i class="span-aft"></i>
            </div>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">1</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">2</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">3</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">4</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">5</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <div class="y_buttom">
                <span>查看更多</span>
                <i class="iconfont">&#xe65f;</i>
            </div>
        </div>
        <div class="rank-empty" id="rank8">
        </div>
        <div class="rank">
            <div class="rankTitle">
                <i class="span-bef"></i>
                <span>新书榜</span>
                <i class="span-aft"></i>
            </div>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">1</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">2</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">3</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">4</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">5</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <div class="y_buttom">
                <span>查看更多</span>
                <i class="iconfont">&#xe65f;</i>
            </div>
        </div>
        <div class="rank-empty" id="rank9">
        </div>
        <div class="rank">
            <div class="rankTitle">
                <i class="span-bef"></i>
                <span>新人榜</span>
                <i class="span-aft"></i>
            </div>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">1</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">2</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">3</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">4</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <a href="#" class="rank-mes">
                <img src="./images/150 (6).webp" alt="">
                <div class="ranking_front">5</div>
                <div class="bookMsg">
                    <h2>灵境行者</h2>
                    <span>卖报小郎君 · 科幻 · 266.55万字</span>
                </div>
            </a>
            <div class="y_buttom">
                <span>查看更多</span>
                <i class="iconfont">&#xe65f;</i>
            </div>
        </div>

    </div>
    <div class="login">
        登录后获得更多特色功能 <span class="dian"> · </span> <span class="span-login"><a href="#">立即登录</a></span>
    </div>
    <footer class="footer">
        <div class="footer-link">
            <a href="#"><img src="./images/QQicon.png" alt=""> QQ阅读</a>
            <a href="#"><img src="./images/redicon.png" alt=""> 红袖添香</a>
        </div>
        <div class="footer-link">
            <a href="#">客户端</a>
            <a href="#" style ="color: black;">触屏版</a>
            <a href="#">帮助与客服</a>
            <a href="#">搜索</a>
        </div>

        <div class="f_text">
            <p class="footer-p">网站备案/许可证号：沪B2-2008046-1</p>
            <p class="footer-p">互联网宗教信息服务许可证 编号：沪（2022）0000022</p>
            <p class="footer-p">copyright © 2002-2023 m.qidian.com</p>
        </div>
    </footer>

</body>

</html>